<template>
  <el-menu
    mode="vertical"
    :default-active="currentKey"
    @select="handleSelect"
    background-color="#F5F7FA"
    text-color="#9093b3"
    active-text-color="#203A64"
    font-weight="600"
  >
    <el-menu-item
      v-for="item in navItems"
      :key="item.key"
      :index="item.key"
      class="side-nav-item"
    >
      <span class="side-nav-label">{{ item.label }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 导航项类型定义
interface NavItem {
  label: string;
  key: string;
}

// 接收父组件传入的导航列表和当前激活项
const props = defineProps({
  navItems: {
    type: Array as () => NavItem[],
    required: true,
  },
  currentKey: {
    type: String,
    required: true,
  },
});

// 触发导航切换事件
const emit = defineEmits(["change"]);
const handleSelect = (key: string) => {
  emit("change", key);
};
</script>

<style scoped>
.side-nav-label {
  font-weight: bold;
}

/* 去掉 el-menu 右侧竖线 */
.el-menu {
  border-right: none !important;
  box-shadow: none !important;
}
</style>
